// Start of JavaScript File

window.onload = function() {

    var canvas1 = document.getElementById("myCanvas1");
    var context1 = canvas1.getContext("2d");

    
    // First Canvas
    
    var image1 = new Image();

    image1.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image1, 0, 0);
    }
    image1.src = "img/bgs/bg.png";

    var image2 = new Image();

    image2.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image2, 370, 378);
    }
    image2.src = "img//tanks/tank.png";

    var image3 = new Image();

    image3.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image3, 0, 10);
    }
    image3.src = "img/menu/menu_side.png";

    var image4 = new Image();

    image4.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image4, 250,100);
    }
    image4.src = "img/logo350x173.png";

    var image5 = new Image();

    image5.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image5, 30,70);
    }
    image5.src = "img/menu-items_03.png";
    
    var image6 = new Image();

    image6.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image6, 30, 130);
    }
    image6.src = "img/menu-items_07.png";

    var image7 = new Image();

    image7.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image7, 30, 190);
    }
    image7.src = "img/menu-items_10.png";

    var image8 = new Image();

    image8.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image8, 30, 250);
    }
    image8.src = "img/menu-items_13.png";

    var image9 = new Image();

    image9.onload = function() {
        context1.moveTo(0, 0);
        context1.lineTo(0,0);
        context1.stroke();	
        context1.drawImage(image9, 50, 230);
    }
    image9.src = "img/audio_15.png";

    // First Canvas ends here 


    // Second Canvas
    var canvas2 = document.getElementById("myCanvas2");
    var context2 = canvas2.getContext("2d");

    var image10 = new Image();

    image10.onload = function() {
        context2.moveTo(0,0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image10, 0, 0);
    }
    image10.src = "img/first_fieldbg.png";

    var image11 = new Image();

    image11.onload = function() {
        context2.moveTo(0,0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image11, 0, 0);
    }
    image11.src = "img/first_field.png";

    var image12 = new Image();

    image12.onload = function() {
        context2.moveTo(0, 0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image12, 0, 10);
    }
    image12.src = "img/bar_02.png";

    var image13 = new Image();

    image13.onload = function() {
        context2.moveTo(0, 0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image13, 36, 23);
    }
    image13.src = "img/button_03.png";

    var image14 = new Image();

    image14.onload = function() {
        context2.moveTo(0,0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image14, 270, 23);
    }
    image14.src = "img/button_05.png";

    var image15 = new Image();

    image15.onload = function() {
        context2.moveTo(0, 0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image15, 480, 23);
    }
    image15.src = "img/button_07.png";

    var image16 = new Image();

    image16.onload = function() {
        context2.moveTo(0, 0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image16, 30, 260);
    }
    image16.src = "img/tankSx.png";


    var image17 = new Image();

    image17.onload = function() {
        context2.moveTo(0, 0);
        context2.lineTo(0,0);
        context2.stroke();	
        context2.drawImage(image17, 500, 181);
    }
    image17.src = "img/tankDx.png";

    // Second Canvas ends here 


    // Third Canvas 
    var canvas3 = document.getElementById("myCanvas3");
    var context3 = canvas3.getContext("2d");

    var image18 = new Image();

    image18.onload = function() {
        context3.moveTo(0,0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image18, 0, 0);
    }
    image18.src = "img/first_fieldbg.png";

    var image19 = new Image();

    image19.onload = function() {
        context3.moveTo(0, 0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image19, 0, 0);
    }
    image19.src = "img/second_field.png";

    var image20 = new Image();

    image20.onload = function() {
        context3.moveTo(0, 0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image20, 0, 10);
    }
    image20.src = "img/bar_02.png";

    var image21 = new Image();

    image21.onload = function() {
        context3.moveTo(0, 0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image21, 36, 23);
    }
    image21.src = "img/button_03.png";

    var image22 = new Image();

    image22.onload = function() {
        context3.moveTo(0,0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image22, 270, 23);
    }
    image22.src = "img/button_05.png";

    var image23 = new Image();

    image23.onload = function() {
        context3.moveTo(0,0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image23, 480, 23);
    }
    image23.src = "img/button_07.png";

    var image24 = new Image();

    image24.onload = function() {
        context3.moveTo(0, 0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image24, 25, 330);
    }
    image24.src = "img/tankSx.png";


    var image25 = new Image();

    image25.onload = function() {
        context3.moveTo(0, 0);
        context3.lineTo(0,0);
        context3.stroke();	
        context3.drawImage(image25, 560, 270);
    }
    image25.src = "img/tankDx.png";

    // Third Canvas ends here 


    // Fourth Canvas 

    var canvas4 = document.getElementById("myCanvas4");
    var context4 = canvas4.getContext("2d");

    var image26 = new Image();

    image26.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image26, 0, 0);
    }
    image26.src = "img/third_field.png";

    var image27 = new Image();

    image27.onload = function() {
        context4.moveTo(0, 0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image27, 0, 10);
    }
    image27.src = "img/bar_02.png";

    var image28 = new Image();

    image28.onload = function() {
        context4.moveTo(0, 0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image28, 36, 23);
    }
    image28.src = "img/button_03.png";

    var image29 = new Image();

    image29.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image29, 270, 23);
    }
    image29.src = "img/button_05.png";

    var image30 = new Image();

    image30.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image30, 480, 23);
    }
    image30.src = "img/button_07.png";

    var image31 = new Image();

    image31.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image31, 550, 70);
    }
    image31.src = "img/moon_14.png";

    var image32 = new Image();

    image32.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image32, 0, 0);
    }
    image32.src = "img/stars.png";

    var image33 = new Image();

    image33.onload = function() {
        context4.moveTo(0,0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image33, 0,0);
    }
    image33.src = "img/third_field1.png";

    var image34 = new Image();

    image34.onload = function() {
        context4.moveTo(0, 0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image34, 70, 150);
    }
    image34.src = "img/tankSx.png";


    var image35 = new Image();

    image35.onload = function() {
        context4.moveTo(0, 0);
        context4.lineTo(0,0);
        context4.stroke();	
        context4.drawImage(image35, 560, 416);
    }
    image35.src = "img/tankDx.png";

    // Fourth Canvas ends here 



    // Fifth Canvas 

    var canvas5 = document.getElementById("myCanvas5");
    var context5 = canvas5.getContext("2d");


    var image36 = new Image();

    image36.onload = function() {
        context5.moveTo(0, 0);
        context5.lineTo(0,0);
        context5.stroke();	
        context5.drawImage(image36, 0,0);
    }
    image36.src = "img/gameOver1.png";


    var image37 = new Image();

    image37.onload = function() {
        context5.moveTo(0, 0);
        context5.lineTo(0,0);
        context5.stroke();	
        context5.drawImage(image37, 190,50);
    }
    image37.src = "img/howto_button.png";

    var image38 = new Image();

    image38.onload = function() {
        context5.moveTo(0, 0);
        context5.lineTo(0,0);
        context5.stroke();	
        context5.drawImage(image38, 45,420);
    }
    image38.src = "img/Arrow.png";

    var image39 = new Image();

    image39.onload = function() {
        context5.moveTo(0, 0);
        context5.lineTo(0,0);
        context5.stroke();	
        context5.drawImage(image39, 90,130);
    }
    image39.src = "img/box.png";

    // Fifth Canvas ends here 


    // Sixth Canvas 

    var canvas6 = document.getElementById("myCanvas6");
    var context6 = canvas6.getContext("2d");


    var image40 = new Image();

    image40.onload = function() {
        context6.moveTo(0, 0);
        context6.lineTo(0,0);
        context6.stroke();	
        context6.drawImage(image40, 0,0);
    }
    image40.src = "img/gameOver1.png";


    var image41 = new Image();

    image41.onload = function() {
        context6.moveTo(0, 0);
        context6.lineTo(0,0);
        context6.stroke();	
        context6.drawImage(image41, 190,50);
    }
    image41.src = "img/option_button.png";

    var image42 = new Image();

    image42.onload = function() {
        context6.moveTo(0, 0);
        context6.lineTo(0,0);
        context6.stroke();	
        context6.drawImage(image42, 45,420);
    }
    image42.src = "img/Arrow.png";

    var image43 = new Image();

    image43.onload = function() {
        context6.moveTo(0, 0);
        context6.lineTo(0,0);
        context6.stroke();	
        context6.drawImage(image43, 90,130);
    }
    image43.src = "img/box.png";

    // Sixth Canvas  ends here 


    // Seventh Canvas 

    var canvas7 = document.getElementById("myCanvas7");
    var context7 = canvas7.getContext("2d");


    var image44 = new Image();

    image44.onload = function() {
        context7.moveTo(0, 0);
        context7.lineTo(0,0);
        context7.stroke();	
        context7.drawImage(image44, 0,0);
    }
    image44.src = "img/gameOver1.png";


    var image45 = new Image();

    image45.onload = function() {
        context7.moveTo(0, 0);
        context7.lineTo(0,0);
        context7.stroke();	
        context7.drawImage(image45, 190,50);
    }
    image45.src = "img/credit.png";

    var image46 = new Image();

    image46.onload = function() {
        context7.moveTo(0, 0);
        context7.lineTo(0,0);
        context7.stroke();	
        context7.drawImage(image46, 45,420);
    }
    image46.src = "img/Arrow.png";

    var image47 = new Image();

    image47.onload = function() {
        context7.moveTo(0, 0);
        context7.lineTo(0,0);
        context7.stroke();	
        context7.drawImage(image47, 90,130);
    }
    image47.src = "img/box.png";

    // Seventh Canvas ends here 



    // Eighth Canvas 

    var canvas8 = document.getElementById("myCanvas8");
    var context8 = canvas8.getContext("2d");


    var image48 = new Image();

    image48.onload = function() {
        context8.moveTo(0, 0);
        context8.lineTo(0,0);
        context8.stroke();	
        context8.drawImage(image48, 0,0);
    }
    image48.src = "img/gameOver1.png";

    var image49 = new Image();

    image49.onload = function() {
        context8.moveTo(0, 0);
        context8.lineTo(0,0);
        context8.stroke();	
        context8.drawImage(image49, 130,50);
    }
    image49.src = "img/gameOver12.png";

    var image50 = new Image();

    image50.onload = function() {
        context8.moveTo(0, 0);
        context8.lineTo(0,0);
        context8.stroke();	
        context8.drawImage(image50, 130,170);
    }
    image50.src = "img/tank12.png";

    // Eighth Canvas ends here 

}

// Ends of the JavaScript file
